<template>
    <div>
        <el-upload
                class="upload-box"
                ref="upload"
                action=""
                :accept="accept"
                :drag="drag"
                :auto-upload="false"
                multiple
                :limit="limit"
                :on-remove="handleRemove"
                :on-exceed="handleExceed"
                :on-change="handleChange"
                :file-list="fileList">
            <el-button size="small" type="primary" v-if="!drag">点击上传</el-button>
            <i class="el-icon-upload" v-if="drag"></i>
            <div class="el-upload__text" v-if="drag">将文件拖到此处，或<em>点击上传</em></div>
            <!--<div slot="tip" class="el-upload__tip">文件格式仅支持：.xls、.xlsx{{isdbf ? '、.dbf' : ''}}{{iscsv ? '、.csv' : ''}}，单文件大小不超过100MB，文件数量不超过{{limit}}个</div>-->
        </el-upload>
    </div>
</template>

<script>
    export default {
        props: {
            // 是否支持拖拽
            drag: {
                type: Boolean,
                default: true
            },
            // 文件列表
            fileList: {
                type: Array
            },
            // 最大数量
            limit: {
                type: Number
            },
            // 是否上传dbf文件
            isdbf: {
                type: Boolean,
                default: false
            },
            // 是否上传csv文件
            iscsv: {
                type: Boolean,
                default: false
            },
            // 文件接收状态
            accept: {
                type: String
            }
        },
        data () {
            return {
            }
        },
        methods: {
            // 移除
            handleRemove (file) {
                this.$emit('removeFile', file.uid)
            },
            // 超限制
            handleExceed () {
                if (this.limit) {
                    this.$message.warning(`最多能上传${this.limit}个文件`)
                }
            },
            /**
             * 文件改变时
             */
            handleChange (file) {
                let size = file.size
                if (size / 1024 / 1024 > 100) {
                    this.$refs.upload.handleRemove(file)
                    this.$message.warning('只能上传小于100M的 .xls、.xlsx、.dbf 文件')
                } else if (this.findRepeatFile(file)) {
                    this.$refs.upload.handleRemove(file)
                    this.$message.warning('请勿重复添加文件')
                } else {
                    this.fileList.push(file)
                }
            },
            /**
             * 查找重复文件
             * @param file 文件内容
             */
            findRepeatFile (file) {
                return this.fileList.some(item => {
                    if (item.name === file.name) {
                        return true
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .upload-box {
        width: 100%;
        /deep/.el-upload {
            width: 100%;
            /deep/.el-upload-dragger {
                width: 100%;
                height: 150px;
            }
        }
    }
</style>
